@model List<DanaZhangCms.ViewModels.HomeVM>
@{

}
<!-- 业务领域 -->
<div class="container">
    <h2 class="about-ywtit" id="ywtd">业务领域</h2>
    <div class="row article-box">
        <div class="col-md-4 col-sm-3">
            <a href="#" class="yw-btn">
                <span class="btn8"></span>
                <h2>刑事辩护</h2>
                <!-- <p class="hidden-sm">刑事辩护刑事辩护刑事辩护</p> -->
            </a>
        </div>
        <div class="col-md-4 col-sm-3">
            <a href="#" class="yw-btn">
                <span class="btn2"></span>
                <h2>刑事控告</h2>
                <!-- <p class="hidden-sm">刑事控告刑事控告刑事控告</p> -->
            </a>
        </div>
        <div class="col-md-4 col-sm-3">
            <a href="#" class="yw-btn">
                <span class="btn3"></span>
                <h2>企业刑事风险防控</h2>
                <!-- <p class="hidden-sm">企业刑事风险防控企业刑事风险防控</p> -->
            </a>
        </div>
    </div>
</div>
<!-- 资讯信息 -->
<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4 section">
            <h3>
                <i class="ico11"></i>@item.Category.Name
                <a href="@Url.Action("index","article")" style="display:block;float:right;font-size:13px;color: gray;font-weight: 100;">More</a>
            </h3>
                <ul class="list-mod">
                    @foreach (var article in item.Articles)
                    {
                        <li>
                            <a href="@(Url.Action("Detail","Article",new { id=article.Id}))" title="@article.Title" class="fl">· @article.Title</a>
                            <span class="time fr">[@article.CreatedDate.ToString("yyyy-MM-dd")]</span>
                        </li>
                    }
                </ul>
            </div>
        }
    </div>
</div>
<br>
@section css{
    <style>
        a:link {
            text-decoration: none;
        }

        a:active {
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .about-ywtit {
            text-align: center;
            font-size: 24px;
        }

        .yw-btn {
            text-align: center;
            display: block;
            margin: 20px 0;
            overflow: hidden
        }

            .yw-btn:hover {
                text-decoration: none
            }

            .yw-btn h2 {
                font-size: 18px;
                color: #666
            }

            .yw-btn:hover h2 {
                color: #005cac
            }

            .yw-btn p {
                color: #999;
                font-size: 14px
            }

            .yw-btn .btn1 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn1.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn1 {
                background: url(images/yw-btn1.png) 0px 100px;
            }

            .yw-btn .btn2 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn2.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn2 {
                background: url(images/yw-btn2.png) 0px 100px;
            }

            .yw-btn .btn3 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn3.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn3 {
                background: url(images/yw-btn3.png) 0px 100px;
            }

            .yw-btn .btn4 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn4.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn4 {
                background: url(images/yw-btn4.png) 0px 100px;
            }

            .yw-btn .btn5 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn5.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn5 {
                background: url(images/yw-btn5.png) 0px 100px;
            }

            .yw-btn .btn6 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn6.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn6 {
                background: url(images/yw-btn6.png) 0px 100px;
            }

            .yw-btn .btn7 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn7.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn7 {
                background: url(images/yw-btn7.png) 0px 100px;
            }

            .yw-btn .btn8 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn8.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn8 {
                background: url(images/yw-btn8.png) 0px 100px;
            }

            .yw-btn .btn9 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn9.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn9 {
                background: url(images/yw-btn9.png) 0px 100px;
            }

            .yw-btn .btn10 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn10.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn10 {
                background: url(images/yw-btn10.png) 0px 100px;
            }

            .yw-btn .btn11 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn11.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn11 {
                background: url(images/yw-btn11.png) 0px 100px;
            }

            .yw-btn .btn12 {
                display: block;
                width: 100px;
                height: 100px;
                background: url(images/yw-btn12.png);
                margin: 5px auto
            }

            .yw-btn:hover .btn12 {
                background: url(images/yw-btn12.png) 0px 100px;
            }
    </style>
}

